import React, { useMemo, useState, useEffect } from 'react';
import { Title } from 'base/ctl/title';
import { useStep } from 'use/step';
import { get_path, Time } from 'base/ctl/base';
import { g_db, g_wsn } from 'db/state';
import { loc } from 'local';
import { StepView } from './ctl';
import { DlgPair } from './pair';
import { load_pair } from './cmd';
import { show_mt, obj_str, InfoList, useHigh, NuiBt, Wait } from 'sui';

const ClientView = ({ umd, wsn }) => {
    const [wait, setWait] = useState(false);
    const [open_pair, openPair] = useState(false);
    const [cfg_pair, cfgPair] = useState();
    const [r_main, mainRight] = useState();
    const [high] = useHigh(140, 200)

    useEffect(() => {
        const tmp = [];

        mainRight(tmp);

        load_pair(null, cfgPair);
    }, []);

    const getData = useMemo(() => {
        return [
            { des: "工艺", value: obj_str(cfg_pair, "tsn") },
            { des: "球类型", value: show_mt(obj_str(cfg_pair, "mt")) },
            { des: "球径", value: obj_str(cfg_pair, "ball") },
            { des: "单轴承球数", value: obj_str(cfg_pair, "num") },
            { des: "直径差", value: obj_str(cfg_pair, "diff") },
            { des: "宽度差", value: obj_str(cfg_pair, "w") },
            { des: "游隙-调整值", value: obj_str(cfg_pair, "base") },
            { des: "游隙-误差值", value: obj_str(cfg_pair, "range") },
            { des: "外圆范围-最小值", value: obj_str(cfg_pair, "dmin") },
            { des: "外圆范围-最大值", value: obj_str(cfg_pair, "dmax") },
            { des: "内孔范围-最小值", value: obj_str(cfg_pair, "kmin") },
            { des: "内孔范围-最大值", value: obj_str(cfg_pair, "kmax") },
        ];
    }, [cfg_pair]);

    const hpair = () => {
        setWait(true);
        load_pair(() => setWait(false), cfgPair);
    };

    return (
        <div className="flex flex-col ml-2 mr-2">
            <div className="inline-flex items-center justify-between my-2">
                <Title label={loc("base_43")} value={g_wsn()} width="w-56"/>
                <Time/>
                <div className="inline-flex">
                    <NuiBt className="h-16 mr-4" hcmd={() => openPair(true)}>配对参数</NuiBt>
                    <NuiBt className="h-16 mr-2">系统参数</NuiBt>
                </div>
            </div>
            <div className="flex flex-row w-full">
                <div style={{ height: `${high}px` }} className="mx-2 overflow-y-auto w-1/3 text-white text-2xl">
                    <InfoList data={getData}/>
                </div>
                <div style={{ height: `${high}px` }} className="border border-white mx-2 overflow-y-auto w-2/3">
                    <StepView main={r_main}/>
                </div>
            </div>
            <DlgPair open={open_pair} setOpen={openPair} cur={cfg_pair} hcmd={hpair}/>
            <Wait wait={wait}/>
        </div>
    );
};

const SelectClient = ({ pathname, mod }) => {
    const [line, wsn] = get_path(pathname, mod);
    const umd = useStep(line, wsn);

    g_db.stop_scan();

    return <ClientView umd={umd} wsn={wsn}/>;
};

export {SelectClient};
